import React, { Component } from 'react';

/*需要管理员才可以访问  */
class PageA extends Component {
    render() {
        return (
                <h1>PageA</h1>
        );
    }
}
class PageB extends Component{
    render (){
        return (
            <h1>PageB</h1>
        )
    }
}
function withVipAuth(Cmp){
    return class VipItem extends Component{
        state={
            role:""
        }
        componentDidMount(){
            setTimeout(()=>{
                this.setState({
                    role:"admin"
                })
            },3000)
        }
        render(){
            if(this.state.role==="VIP"){
                return <Cmp></Cmp>
            }else{
                return <div>没有权限查看该页面！</div>
            }
        }
    }
}
function withAdminAuth(Cmp){
    return class AdminRole extends Component{
        state={
            role:""
        }
        componentDidMount(){
            setTimeout(()=>{
                this.setState({
                    role:"admin"
                })
            },3000)
        }
        render(){
            if(this.state.role==="admin"){
                return <Cmp></Cmp>
            }else{
                return <div>没有权限查看该页面！</div>
            }
        }
    }
}
class App extends Component{
    render(){
        let WithAdminPageA=withAdminAuth(PageA)
        let WithAdminPageB=withVipAuth(PageB)
        return(
            <div>
                <WithAdminPageA></WithAdminPageA>
                <WithAdminPageB></WithAdminPageB>
            </div>
        )
    }
}
export default App;